<!--
 * @Description: 手机预览界面
 * @Author: liyujie
 * @Date: 2021/3/5
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/3/5
-->
<template>
    <div class="wrapper">
        <!--状态栏-->
        <div class="status-bar">
            <div class="statusbar-left">
                <i class="iconfont el-icon-hand-left"/>
            </div>
            <div class="statusbar-center">
                <div class="center-text">9:41</div>
                <div class="center-eng">AM</div>
            </div>
            <div class="statusbar-right">
                <i class="iconfont el-icon-hand-bluetooth"/>
                <div class="right-number">100%</div>
                <i class="iconfont el-icon-hand-Battery"/>
            </div>
        </div>
        <!--导航栏-->
        <div class="nav-bar">
            <i class="iconfont tab-icon el-icon-hand-zuojiantou1"/>
        </div>
        <!--显示区域-->
        <div class="phone">
            <div class="bg-view">
                <img
                    v-for="(item, index) in page_config.background_images"
                    :key="index"
                    class="page-bg"
                    :src="item.url"
                >
            </div>
            <div
                class="wheel-wrapper"
                :style="{
                    marginTop: `${page_config.turntable_top / 2}px`,
                }"
                v-if="page_config.turntable_image"
            >
                <div
                    class="wheel-view"
                    :style="{
                        backgroundImage: `url(${page_config.turntable_image})`,
                        transform:rotate_angle,
                        transition:rotate_transition
                    }"
                />
                <div
                    class="point-view"
                    :style="{backgroundImage: `url(${page_config.turntable_hand_image})`}"
                    @click="start"
                />
                <div class="wheel-count">抽奖次数：23次</div>
            </div>
            <div
                class="my-prize"
                v-if="page_config.background_images.length"
            >我的奖品</div>
            <div
                class="notice"
                v-if="page_config.background_images.length"
            >小火龙抽中奖品名称奖品名称</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PreviewPhone',
    props: {
        page_config: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            // light亮色 dark暗色
            mode: 'dark',
            rotate_angle: 0,
            rotate_transition: "transform 4s ease-in-out",
        };
    },
    mounted() {
    },
    methods: {
        start() {
            /*let rand_circle = 5;
            let rotate_angleValue = rand_circle * 360;

            this.rotate_angle = `rotate(${rotate_angleValue}deg)`;*/
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    width: 375px;
    height: 667px;
    background: #FFFFFF;
    box-shadow: 0 0 10px 0 rgba(153, 169, 192, 0.2);
    position: relative;
    .status-bar {
        width: 100%;
        height: 22px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;

        .statusbar-left, .statusbar-center, .statusbar-right {
            display: flex;
            height: 20px;
            align-items: center;
            font-size: 20px;
            font-weight: 500;
            color: #fff;

            .el-icon-hand-left, .el-icon-hand-bluetooth, .el-icon-hand-Battery {
                font-size: 20px;
            }

            .center-text {
                font-size: 12px;
                margin-right: 4px;
                font-weight: 500;
            }

            .center-eng {
                font-size: 12px;
                font-weight: 500;
            }

            .right-number {
                font-size: 12px;
            }

            .el-icon-hand-bluetooth {
                margin-right: -3px;
            }
        }

        .statusbar-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    .nav-bar {
        height: 38px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: absolute;
        top: 22px;
        left: 0;
        padding: 0 12px;
        color: #fff;
        z-index: 9;
    }
    .phone {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
        &::-webkit-scrollbar {
            width: 0;
        }
        .bg-view {
            position: absolute;
            img {
                width: 100%;
                display: block;
            }
        }
        .wheel-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 330px;
            height: 330px;
            margin: auto;
            box-sizing: content-box;
            padding-bottom: 40px;

            .wheel-view {
                width: 330px;
                height: 330px;
                position: absolute;
                left: 0;
                top: 0;
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
            }
            .point-view {
                width: 111px;
                height: 111px;
                position: absolute;
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
                cursor: pointer;
                z-index: 2;
            }
            .wheel-count {
                width: 115px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                background: rgba(0, 0, 0, 0.2);
                border-radius: 14px;
                font-size: 12px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #FFFFFF;
                position: absolute;
                bottom: 0;
            }
        }

        .my-prize {
            width: 71px;
            height: 26px;
            line-height: 26px;
            background: linear-gradient(90deg, #FFFBF4 0%, #FFF4EA 100%);
            border-radius: 100px 0 0 100px;
            position: absolute;
            right: 0;
            top: 62px;
            text-align: center;
            font-size: 12px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FB3E51;
            cursor: pointer;
        }
        .notice {
            width: 140px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 13px;
            position: absolute;
            left: 15px;
            top: 62px;
            font-size: 10px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            padding: 0 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}
</style>
